<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <link rel="stylesheet" href="../css/ratchet.css"/>
    <style type="text/css">
        #myCanvas{border:dashed 2px #CCC}
		#button2{
			position:absolute;
			left:700px;
			top:10px;
			}
    </style>
    
    <body>
        <canvas id="myCanvas" width="700px" height="400px">
        </canvas>
        <div id="title" style="position:absolute;left:250px;top:10px;">
            	<h4>数据1-网络调查-获取知识的渠道</h4>
                <h5 align="center">南城启航</h5>
            </div>
         <div id="first" style="position:absolute;left:20px;top:50px;">
         		<h6><img src="../res/img/first.png">网络</h6>
         </div>
         <div id="second" style="position:absolute;left:20px;top:100px;">
         		<h6><img src="../res/img/second.png">书本</h6>
         </div>
         <div id="third" style="position:absolute;left:20px;top:150px;">
         		<h6><img src="../res/img/third.png">电视</h6>
         </div>
         <div id="fourth" style="position:absolute;left:20px;top:200px;">
         		<h6><img src="../res/img/fourth.png">询问</h6>
         </div>
         <div id="fifth" style="position:absolute;left:20px;top:250px">
         		<h6><img src="../res/img/fifth.png">其他</h6>
         </div>
            
            <div id="button2">
        		<h2>&nbsp;&nbsp;Canvas饼图</h2>
        		<br>
        		<br>
        	<ul><button class="btn btn-primary" onClick="startdrawPie()" style="height:60px; width:150px;"><font face="微软雅黑" size="+1">显示原始数据</font></button></ul>
            
            
            <ul><button class="btn btn-negative" onClick="randomdata()"  style="height:60px; width:150px;"><font face="微软雅黑" size="+1">切换随机数据</font></button></ul>
        </div>
        
            <nav class="bar bar-tab">
 				 <a class="tab-item active" href="index-mob.html">基于HTML5的3D数据展示软件</a>
                 <a class="tab-item" href="canvasArea.php">上一个（面积图）</a>
			</nav>
    </body>
    <script type="text/javascript">
	var piedata = new Array(4);
	
	function startdrawPie(){
		var b=200;
		//alert(parseInt(b/3));
        var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);
		/*
		ctx.shadowOffsetX=10;
		ctx.shadowOffsetY=10;
		ctx.shadowBlur=10;
		ctx.shadowColor="#c5c5c0";
		*/
		ctx.beginPath();
    <?php
                $link=mysql_connect(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
                if($link)
                {
                    mysql_select_db(SAE_MYSQL_DB,$link);
                    //your code goes here	
                }
                $sql ="SELECT data FROM CPie order by id asc";
                $result = mysql_query($sql)
                        or die(SQL语句执行失败);
                        echo 'var piedata=new Array(';
                        while($row =mysql_fetch_row($result))
                        {	
                            echo $row[0].',';
                                //echo 'var areadata=new Array('.$row[0].', '.$row[1].', '.$row[2].', '.$row[3].', '.$row[4].', '.$row[5].', '.$row[6].', '.$row[7].', '.$row[8].', '.$row[9].', '.$row[10].', '.$row[11].');';													
                        }
                        echo '0);';
                        mysql_free_result($result);
                        mysql_close();
?>
   		//var piedata=new Array(60.2,8.5,5.2,21.2,4.9);
		for(var n=0;n<5;n++){
			piedata[n]=piedata[n]/100;
			piedata[n]=piedata[n]*360
			piedata[n]=piedata[n]*Math.PI/180;
					
		}
		var piedata2=new Array(piedata[0],piedata[0]+piedata[1],piedata[0]+piedata[1]+piedata[2],piedata[0]+piedata[1]+piedata[2]+piedata[3],piedata[0]+piedata[1]+piedata[2]+piedata[3]+piedata[4]);
	
		//alert(piedata[1]*(Math.PI*2));
	
	
    ctx.arc(350, 240, 150, 0, piedata2[0], false);    
    //按照指定的路径绘制弧线
	ctx.lineTo(350,240);
	ctx.fillStyle = "#35a2ff"; 
    ctx.fill();
    ctx.stroke();
	
	
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[0], piedata2[1], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "#6bff87"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[1], piedata2[2], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "black"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[2], piedata2[3], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "red"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[3], piedata2[4], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "yellow"; 
    ctx.fill();
    ctx.stroke();
	}
	
	function randomdata(){
		
		var piedata=new Array(4);
		
		piedata[0]=Math.random()*100/5;
		piedata[1]=(100-piedata[0])*Math.random()/4;
		piedata[2]=(100-piedata[0]-piedata[1])*Math.random()/3;
		piedata[3]=(100-piedata[0]-piedata[1]-piedata[2])*Math.random()/2;
		piedata[4]=100-piedata[0]-piedata[1]-piedata[2]-piedata[3];
		
		var b=200;
		//alert(parseInt(b/3));
        var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);
		/*
		ctx.shadowOffsetX=10;
		ctx.shadowOffsetY=10;
		ctx.shadowBlur=10;
		ctx.shadowColor="#c5c5c0";
		*/
		ctx.beginPath();
		
		
		for(var n=0;n<5;n++){
			piedata[n]=piedata[n]/100;
			piedata[n]=piedata[n]*360
			piedata[n]=piedata[n]*Math.PI/180;
					
		}
		var piedata2=new Array(piedata[0],piedata[0]+piedata[1],piedata[0]+piedata[1]+piedata[2],piedata[0]+piedata[1]+piedata[2]+piedata[3],piedata[0]+piedata[1]+piedata[2]+piedata[3]+piedata[4]);
	
		//alert(piedata[1]*(Math.PI*2));
	
	
    ctx.arc(350, 240, 150, 0, piedata2[0], false);    
    //按照指定的路径绘制弧线
	ctx.lineTo(350,240);
	ctx.fillStyle = "#35a2ff"; 
    ctx.fill();
    ctx.stroke();
	
	
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[0], piedata2[1], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "#6bff87"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[1], piedata2[2], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "black"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[2], piedata2[3], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "red"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[3], piedata2[4], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "yellow"; 
    ctx.fill();
    ctx.stroke();
	
	
	}
	
	
    </script>
    
</html>